<template>
	<view style="height: 100%;">
		<!-- 导航栏 -->
		<uni-nav-bar style="width: 100%;height: 5.5%;" :fixed="false"  left-icon="bars" rightIcon="circle-filled" title="全部事项" color="#333333" 
			@clickLeft="showDrawer('showLeft')" @clickRight="newpage('/pages/mainselect/mainselect')" background-color="#FFFFFF">
		</uni-nav-bar>
		
		<!-- 左侧抽屉视图 -->
		<uni-drawer ref="showLeft" mode="left" :width="320" style="height: 100%;">
			<!-- 上面 -->
			<view style="">
				<uni-card title="视图展示" style="background-color: unset;margin: 4%;">
					<view style="display: flex;">
						<view v-for="viewchoice,index in viewchoices" @click="changemodel(index)" style="margin: 0 1%;width: 25%;flex:1;text-align: center;">
							<uni-icons :type="icontypes[index]" size="30"></uni-icons>
							<text class="drawer_button">\n{{viewchoice}}</text>
						</view>
					</view>
				</uni-card>
				
			</view>
			<!-- 中间 -->
			<view style="margin: 5% 0;">
				<uni-card title="分类展示" style="background-color: unset;margin: 4%;">
					<view style="display: flex;padding: 2% 0;">
						<uni-icons type="list" size="25"></uni-icons>
						<text style="font-size: 100%;">全部</text>
						<text style="flex: 1;text-align: right;font-size: 100%;">{{Data.length}}</text>
					</view>
					
					<view v-for="formtype in formTypes" style="display: flex;padding: 2% 0;border-top: 1px solid #f0f0f0;">
						<uni-icons type="list" size="25"></uni-icons>
						<text style="font-size: 100%;">{{formtype.text}}</text>
						<text style="flex: 1;text-align: right;font-size: 100%;">{{type_num[formtype.text]}}</text>
					</view>
				</uni-card>
				
			</view>
			<!-- 下面 -->
			<view style="margin-bottom: 0;margin-top: auto;">
				<view style="flex: 1;text-align: center;">
					<uni-icons type="plus" size="25"></uni-icons>
					<text @click="newpage('/pages/TypeManager/TypeManager',type_num)" style="font-size: 18px;margin-bottom: 1%;">添加分类</text>
				</view>
				<button style="text-align: center;margin:5%;margin-top: 20%;" @click="newpage('/pages/login/login')">退出登录</button>
			</view>
		</uni-drawer>
		
		<!-- 列表视图 -->
		<view v-if="viewshow===0">
			<view v-for="item in titles" v-if="Data_devide[item] && Data_devide[item].length !== 0 && item!='已完成'">
				<uni-card class="card_info" :title=item :extra="Data_devide[item].length+''">
					<view v-for="index, i in Data_devide[item]"  class="card" v-if="Data[index].isfinish==false">
						<uni-icons type="circle" size="30" @click="finish(index,true)" style="margin-top:3%;"></uni-icons>
						<view class="info" @click="showDialog('checkInfo',index)">
							<text class="data_info">{{Data[index].info}}\n</text>
							<uni-dateformat :date="Data[index].date"></uni-dateformat>
						</view>
					</view>
				</uni-card>
			</view>
			<!-- 悬浮按钮 -->
			<uni-fab ref="fab" horizontal="right" vertical="bottom" @fabClick="showDialog('alertDialog')" />
			<!-- 已完成 -->
			<view v-if="Data_devide['已完成']&&Data_devide['已完成'].length!=0">
				<uni-card class="card_info" title="已完成" :extra="Data_devide['已完成'].length+''">
					<view v-for="index, i in Data_devide['已完成']"  class="card">
						<uni-icons type="checkmarkempty" size="30" @click="finish(index,false)" style="margin-top:3%;"></uni-icons>
						<view class="info" @click="showDialog('checkInfo',index)">
							<text class="data_info" style="text-decoration:line-through">{{Data[index].info}}\n</text>
							<uni-dateformat :date="Data[index].date"></uni-dateformat>
						</view>
					</view>
				</uni-card>
			</view>
			


			
			<!-- 添加事项弹窗 -->
			<uni-popup ref="alertDialog" type="dialog" :mask-click="true">
				<uni-card>
					<view style="display: flex;">
						<text style="flex:1;text-align: center;">添加事项</text>
					</view>
					<uni-forms ref="baseForm" :modelValue="FormData">
						<uni-forms-item label="详情" class="popup_info">
							<uni-easyinput v-model="FormData.info" placeholder="请输入事项" />
						</uni-forms-item>
						<uni-forms-item label="重要性" class="popup_info">
							<uni-data-select :localdata="formImportant" v-model="FormData.important" />
						</uni-forms-item>
						<uni-forms-item label="类型" class="popup_info">
							<uni-data-select :localdata="formTypes" v-model="FormData.type" placeholder="请输入类型" />
						</uni-forms-item>
						<uni-forms-item label="时间" class="popup_info">
							<uni-datetime-picker type="datetime" return-type="timestamp" v-model="FormData.date"/>
						</uni-forms-item>
						
					</uni-forms>
					<button @click="submit('alertDialog')" class="popup_button">确认添加</button>
					<button @click="closeDialog('alertDialog')" class="popup_button">取消</button>
				</uni-card>
			</uni-popup>
			
			<!-- 编辑视图 -->
			<uni-popup ref="checkInfo" type="dialog" :mask-click="true">
				<uni-card>
					<text class="uni-h6">编辑事项</text>
					<uni-forms ref="baseForm" :modelValue="InfoData">
						<uni-forms-item label="详情" class="popup_info">
							<uni-easyinput v-model="InfoData.info" placeholder="请输入事项" />
						</uni-forms-item>
						<uni-forms-item label="重要性" class="popup_info">
							<uni-data-select :localdata="formImportant" v-model="InfoData.important" />
						</uni-forms-item>
						<uni-forms-item label="类型" class="popup_info">
							<uni-data-select :localdata="formTypes" v-model="InfoData.type" placeholder="请输入类型" />
						</uni-forms-item>
						<uni-forms-item label="时间" class="popup_info">
							<uni-datetime-picker type="datetime" return-type="timestamp" v-model="InfoData.date"/>
						</uni-forms-item>
						<uni-forms-item label="备注" class="popup_info">
							<uni-easyinput v-model="InfoData.detail" placeholder="请输入备注" />
						</uni-forms-item>
						
					</uni-forms>
					<button @click="submit('checkInfo')" class="popup_button">确定</button>
					<button @click="closeDialog('checkInfo')" class="popup_button">取消</button>
				</uni-card>
			</uni-popup>
		</view>
		
		<!-- 四象限视图 -->
		<view v-if="viewshow==1" style="height: 94.5%;">
			<!-- 第一行 -->
			<view style="display: flex;height: 50%;">
				<uni-card :title="formImportant[0].text" style="height:90%;width:90%;margin-right: 1%;margin-bottom: 0.1%;">
					<view v-for="item, index in Data" v-if="item.important==formImportant[0].text" style="display: flex;border-bottom:0.1px solid #f0f0f0">
						<uni-icons type="circle" size="25" v-if="item.isfinish==false" @click="finish(index,true)" style="margin-top:3%;"></uni-icons>
						<uni-icons type="checkmarkempty" size="25" v-if="item.isfinish==true" @click="finish(index,false)" style="margin-top:3%;"></uni-icons>
						<view class="info" @click="showDialog('checkInfo',index)" style="margin-left: 5%;">
							<text class="data_info" v-if="Data[index].isfinish==false">{{Data[index].info}}\n</text>
							<text class="data_info" v-if="Data[index].isfinish==true" style="text-decoration:line-through">{{Data[index].info}}\n</text>
							
							<uni-dateformat :date="Data[index].date" format="yyyy/MM/dd"></uni-dateformat>
						</view>
					</view>
				</uni-card>
				<uni-card :title="formImportant[1].text" style="height:90%;width:90%;margin-left:1%;margin-bottom: 0.1%;">
					<view v-for="item, index in Data" v-if="item.important==formImportant[1].text" style="display: flex;border-bottom:0.1px solid #f0f0f0">
						<uni-icons type="circle" size="25" v-if="item.isfinish==false" @click="finish(index,true)" style="margin-top:3%;"></uni-icons>
						<uni-icons type="checkmarkempty" size="25" v-if="item.isfinish==true" @click="finish(index,false)" style="margin-top:3%;"></uni-icons>
						<view class="info" @click="showDialog('checkInfo',index)" style="margin-left: 5%;">
							<text class="data_info" v-if="Data[index].isfinish==false">{{Data[index].info}}\n</text>
							<text class="data_info" v-if="Data[index].isfinish==true" style="text-decoration:line-through">{{Data[index].info}}\n</text>
							
							<uni-dateformat :date="Data[index].date" format="yyyy/MM/dd"></uni-dateformat>
						</view>
					</view>
				</uni-card>
			</view>
			<!-- 第二行 -->
			<view style="display: flex;height: 50%;">
				<uni-card :title="formImportant[2].text" style="height:90%;width:90%;margin-right: 1%;margin-top: 0.1%;">
					<view v-for="item, index in Data" v-if="item.important==formImportant[2].text" style="display: flex;border-bottom:0.1px solid #f0f0f0">
						<uni-icons type="circle" size="25" v-if="item.isfinish==false" @click="finish(index,true)" style="margin-top:3%;"></uni-icons>
						<uni-icons type="checkmarkempty" size="25" v-if="item.isfinish==true" @click="finish(index,false)" style="margin-top:3%;"></uni-icons>
						<view class="info" @click="showDialog('checkInfo',index)" style="margin-left: 5%;">
							<text class="data_info" v-if="Data[index].isfinish==false">{{Data[index].info}}\n</text>
							<text class="data_info" v-if="Data[index].isfinish==true" style="text-decoration:line-through">{{Data[index].info}}\n</text>
							
							<uni-dateformat :date="Data[index].date" format="yyyy/MM/dd"></uni-dateformat>
						</view>
					</view>
				</uni-card>
				<uni-card :title="formImportant[3].text" style="height:90%;width:90%;margin-left:1%;margin-top: 0.1%;">
					<view v-for="item, index in Data" v-if="item.important==formImportant[3].text" style="display: flex;border-bottom:0.1px solid #f0f0f0">
						<uni-icons type="circle" size="25" v-if="item.isfinish==false" @click="finish(index,true)" style="margin-top:3%;"></uni-icons>
						<uni-icons type="checkmarkempty" size="25" v-if="item.isfinish==true" @click="finish(index,false)" style="margin-top:3%;"></uni-icons>
						<view class="info" @click="showDialog('checkInfo',index)" style="margin-left: 5%;">
							<text class="data_info" v-if="Data[index].isfinish==false">{{Data[index].info}}\n</text>
							<text class="data_info" v-if="Data[index].isfinish==true" style="text-decoration:line-through">{{Data[index].info}}\n</text>
							
							<uni-dateformat :date="Data[index].date" format="yyyy/MM/dd"></uni-dateformat>
						</view>
					</view>
				</uni-card>
			</view>
		</view>
	
		<!-- 日历视图 -->
		<view v-if="viewshow==2">
			<uni-calendar class="uni-calendar--hook" @change="changecal" :showMonth="false"  />
			<uni-card class="card_info" :title="this.cal_sel" :extra="'2'">
				<view v-for="item, index in Data"  class="card" v-if="checkIfToday(item.date)">
					<uni-icons v-if="item.isfinish==false" type="circle" size="30" @click="finish(index,true)" style="margin-top:3%;"></uni-icons>
					<uni-icons v-if="item.isfinish==true" type="checkmarkempty" size="30" @click="finish(index,false)" style="margin-top:3%;"></uni-icons>
					<view class="info" @click="showDialog('checkInfo',index)">
						<text class="data_info" v-if="item.isfinish==false">{{item.info}}\n</text>
						<text class="data_info" v-if="item.isfinish==true" style="text-decoration:line-through">{{item.info}}\n</text>
						
						<uni-dateformat :date="item.date"></uni-dateformat>
					</view>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cal_date:[],
				type_num:{},
				cal_sel:"2022-11-22",
				icontypes:["list","email","calendar","shop"],
				viewshow:0,
				viewchoices:["列表","四象限","日历","清单"],
				baseurl:"http://localhost:8000/",
				titles:["过去","今天","明后天","7天内","未来","已完成"],
				Data:[],
				Data_devide:{},
				infoNum:0,
				FormData:{
					"info":"",
					"date":"",
					"type":"",
					"important":"",
				},

				InfoData:{
					"info":"",
					"date":0,
					"type":"",
					"important":"",
					"detail":"",
				},
				types:[],
				formTypes:[],
				formImportant:[
				  { value: "重要且紧急", text: "重要且紧急" },
				  { value: "重要不紧急", text: "重要不紧急" },
				  { value: "不重要紧急", text: "不重要紧急" },
				  { value: "不重要不紧急", text: "不重要不紧急" },
				],
			}
		},
		methods: {
			showDrawer(e) {
				console.log("showdrawer")
				console.log(this.formTypes)
				this.$refs[e].open()
			},
			checkIfToday(date){
				console.log(date)
				date=new Date(date);
				let y= date.getFullYear(); //获取完整的年份(4位)
				let m= date.getMonth()+1; //获取当前月份(0-11,0代表1月)
				let d= date.getDate(); //获取当前日(1-31)
				console.log(y)
				console.log(m)
				console.log(d)
				console.log(this.cal_date)
				return y==this.cal_date[0]&&m==this.cal_date[1]&&d==this.cal_date[2];
			},
			changemodel(index){
				this.viewshow=index;
				this.$refs.showLeft.close();
			},
			finish(Data_item,isfinish){
				var temp=this.Data[Data_item];
				console.log(temp)
				temp["isfinish"]=isfinish;
				this.getData();
				this.updateMatter(temp);
			},
			showDialog(type,index){
				if (type=="alertDialog"){
					this.FormData={};
					this.$refs.alertDialog.open();
				}
				else if (type=="checkInfo"){
					this.FormData={};
					Object.assign(this.InfoData, this.Data[index]);
					this.infoNum=index;
					this.$refs.checkInfo.open();
				}
				
			},
			changecal(e){
				this.cal_date=[e.year,e.month,e.date];
				this.cal_sel=e.fulldate
				this.$forceUpdate()
			},
			submit(type){
				if (type==="alertDialog"){
					var temp={
						"matterid":0,
						"isfinish":false,
						"info":this.FormData.info,
						"date":this.FormData.date,
						"type":this.FormData.type,
						"important":this.FormData.important,
						"detail":"",
					};
					if (temp.info==null||temp.info==""){
						console.log("no info")
					}
					if (temp.date==null||temp.date==""){
						console.log("no date")
					}
					if (temp.type==null||temp.type==""){
						console.log("no type")
					}
					if (temp.important==null||temp.important==""){
						console.log("no important")
					}
					console.log(temp);
					
					uni.request({
					    url: this.baseurl+'matter/addMatter/', 
						method:'POST',
						data:temp,
					    success: (res) => {
							console.log(1)
							if (res.data.code=='0000'){
								uni.showToast({
									title: '添加成功',
									icon:'success',
									mask:true
								});
								this.Data.push(temp);
								this.$refs.alertDialog.close();
								this.updateDevide();
							}	
					    },
						fail() {
							console.log("fail");
							this.$refs.alertDialog.close();
						}
					});					
				}
				else if (type=="checkInfo"){
					this.Data[this.infoNum]=this.InfoData;
					this.updateMatter(this.InfoData);
					this.updateDevide();
					this.$refs.checkInfo.close();
				}
				
			},
			closeDialog(type){
				if (type=="alertDialog"){
					this.$refs.alertDialog.close();
				}
				else if (type=="checkInfo"){
					this.$refs.checkInfo.close();
				}
			},
			devide(date_type){
				this.Data_devide[date_type] = []
				for (let i=0;i<this.Data.length;i+=1){
					if (date_type=="过去"
						&&this.Data[i].date<new Date(new Date().toLocaleDateString()).getTime()
						&&this.Data[i].isfinish==false){
						this.Data_devide[date_type].push(i);
					}
					else if (date_type=="今天"
						&& (this.Data[i].date>=new Date(new Date().toLocaleDateString()).getTime())
						&& (this.Data[i].date<new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000)
						&&this.Data[i].isfinish==false){
							this.Data_devide[date_type].push(i);
					}
					else if (date_type=="明后天"
						&& (this.Data[i].date>=new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000)
						&& (this.Data[i].date<new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000*3)
						&&this.Data[i].isfinish==false){
							this.Data_devide[date_type].push(i);
					}
					else if (date_type=="7天内"
						&& (this.Data[i].date>=new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000*3)
						&& (this.Data[i].date<new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000*7)
						&&this.Data[i].isfinish==false){
							this.Data_devide[date_type].push(i);
					}
					else if (date_type=="未来"
						&& (this.Data[i].date>=new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000*7)
						&&this.Data[i].isfinish==false){
							this.Data_devide[date_type].push(i);
					}
					else if (date_type=="已完成"
						&&this.Data[i].isfinish==true){
							this.Data_devide[date_type].push(i);
					}
				}
			},
			async getTypes(){
				console.log(1);
				await uni.request({
				    url: this.baseurl+'types/selectall/', 
					method:'GET',
				    success: (res) => {
						console.log(1)
						if (res.data.code=='0000'){
							this.types=res.data.data;
							console.log(this.types)
							for (let i =0 ;i<this.types.length;i++){
								this.formTypes[i]={ value: this.types[i].username, text:this.types[i].username};
							}
							console.log(this.formTypes)
							this.$forceUpdate()
						}	
				    },
					fail() {
						console.log("fail");
						this.$refs.alertDialog.close();
					}
				});		
			},
			updateMatter(newmatter){
				uni.request({
				    url: this.baseurl+'matter/updateMatter/', 
					method:'PUT',
					data:newmatter,
				    success: (res) => {
						console.log(1)
						if (res.data.code=='0000'){
							uni.showToast({
								title: '更新成功',
								icon:'success',
								mask:true
							});
							this.getData();
						}	
				    },
					fail() {
						console.log("fail");
						this.$refs.alertDialog.close();
					}
				});			
			},
			updateDevide(){
				for (let i in this.titles){
					this.devide(this.titles[i]);
				}
				console.log(this.types)
				console.log(this.Data)
				for (let i=0;i<this.types.length;i++){
					this.type_num[this.types[i].username]=0;
					for (let j=0;j<this.Data.length;j++){
						// console.log(this.Data[j].type)
						// console.log(this.types[i].username)
						if (this.Data[j].type==this.types[i].username){
							this.type_num[this.types[i].username]++;
						}
					}
				}
				console.log(this.type_num)
				this.$forceUpdate();
			},
			newpage(url,data){
				console.log(JSON.stringify(data))
				console.log(url+"/data="+JSON.stringify(data))
				uni.navigateTo({
					'url':url+"?data="+JSON.stringify(data),
				})
			},
			lastpage(){
				uni.navigateBack();
			},
			getData(){
				uni.request({
				    url: this.baseurl+'matter/selectall/', 
					method:'GET',
				    success: (res) => {
						console.log(1)
						if (res.data.code=='0000'){
							console.log(res.data.data)
							this.Data=res.data.data;
							this.updateDevide();
						}	
				    },
					fail() {
						console.log("fail");
					}
				});
			}
		},
		async mounted() {
			//数据库读取
			await this.getTypes();
			this.getData();
			this.$forceUpdate()
			console.log("formtypes:")
			console.log(this.formTypes)
		},
		async onShow(){
			console.log("onshow")
			var temp = {}
			Object.assign(temp,this.type_num);
			console.log(temp);
			await this.getTypes();
			this.getData();
			console.log(this.type_num);
			// setTimeout(() => {
			// 	console.log(this.type_num)
			// 	this.$forceUpdate();
			// }, 3000);
			
		},
		watch: {
		    type_num (newName, oldName) {
		        this.$forceUpdate();
		    },
			immediate: true,
			deep: true
		}
	}
</script>

<style lang="scss">
	.uni-date-single--x{
		margin-left: -40% !important; 
	}
	.card{
		display: flex;
		margin-bottom: 2%;
		
		.finish_button{
			width: 8%;
			margin-left: 0;
			margin-right: 0;
		}
		
		.info{
			margin-left: 3%;
			margin-right: auto;
			
			.data_info{
				font-size: 18px;
			}
			.data_date{
				font-size: 12px;
				
			}
		}
	}
	
	.popup_info{
		margin: 5% 0;
	}
	
	.popup_button{
		margin: 3% 2%;
	}
	
	.card_info{
		border-radius: 25px;
		background: #ffffff;
		padding: 20px;
	}
	
	.drawer_button{
		background-color: unset;
		// color: aliceblue;
		// border: #ffffff solid 1px;
		font-size: 15px;
	}
	
</style>
